import { defineConfig, presetIcons } from 'unocss';
import presetWeapp from 'unocss-preset-weapp';
import { transformerClass } from 'unocss-preset-weapp/transformer';
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';

export default defineConfig({
  content: {
    pipeline: {
      exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build', 'mock', './stats.html']
    }
  },
  rules: [
    [/^bg-img-\[(.+)\]$/, ([, value]) => {
      // 替换下划线为正常的路径分隔符
      const path = value.replace(/_/g, '/');
      return { 'background-image': `url(${path})` };
    }],
  ],
  presets: [
    presetWeapp({
      // h5兼容
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      designWidth: 750,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      },
      taroWebpack: 'webpack5'
    }) as any,
    presetIcons({
      scale: 1,
      warn: true,
      extraProperties: {
        display: 'inline-block'
      },
      collections: {
        local: FileSystemIconLoader('./src/assets/svg')
      }
    })
  ],
  shortcuts: {
    // 基础布局
    'wh-full': 'w-full h-full',
    'flex-center': 'flex justify-center items-center',
    'flex-between': 'flex justify-between items-center',
    'flex-col-center': 'flex flex-col justify-center items-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    'i-flex-center': 'inline-flex justify-center items-center',
    'i-flex-x-center': 'inline-flex justify-center',
    'i-flex-y-center': 'inline-flex items-center',
    'b-flex-col': 'flex flex-col',
    'flex-col-stretch': 'b-flex-col items-stretch',
    'i-flex-col': 'inline-flex flex-col',
    'i-flex-col-stretch': 'i-flex-col items-stretch',
    'flex-1-hidden': 'flex-1 overflow-hidden',
    
    // 定位
    'absolute-lt': 'absolute left-0 top-0',
    'absolute-lb': 'absolute left-0 bottom-0',
    'absolute-rt': 'absolute right-0 top-0',
    'absolute-rb': 'absolute right-0 bottom-0',
    'absolute-tl': 'absolute-lt',
    'absolute-tr': 'absolute-rt',
    'absolute-bl': 'absolute-lb',
    'absolute-br': 'absolute-rb',
    'absolute-center': 'absolute-lt flex-center wh-full',
    'fixed-lt': 'fixed left-0 top-0',
    'fixed-lb': 'fixed left-0 bottom-0',
    'fixed-rt': 'fixed right-0 top-0',
    'fixed-rb': 'fixed right-0 bottom-0',
    'fixed-tl': 'fixed-lt',
    'fixed-tr': 'fixed-rt',
    'fixed-bl': 'fixed-lb',
    'fixed-br': 'fixed-rb',
    'fixed-center': 'fixed left-0 top-0 flex-center wh-full',
    
    // 文本处理
    'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
    'ellipsis-text': 'nowrap-hidden text-ellipsis',
    'transition-base': 'transition-all duration-300 ease-in-out',
    
    // 主题色彩
    'bg-primary': 'bg-#059669',
    'text-primary': 'text-blue-600',
    'text-success': 'text-green-600',
    'text-warning': 'text-orange-600',
    'text-danger': 'text-red-600',
    'text-muted': 'text-gray-500',
    'text-light': 'text-gray-400',
    
    // 卡片样式
    'card': 'bg-white rounded-2xl shadow-sm border border-gray-100',
    'card-hover': 'card transition-all duration-200 active:scale-98',
    'card-elevated': 'bg-white rounded-2xl shadow-md border border-gray-50',
    
    // 按钮样式
    'btn-primary': 'bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors',
    'btn-secondary': 'bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl transition-colors',
    'btn-danger': 'bg-red-500 hover:bg-red-600 text-white font-medium rounded-xl transition-colors',
    'btn-success': 'bg-green-500 hover:bg-green-600 text-white font-medium rounded-xl transition-colors',
    
    // 状态样式
    'todo-completed': 'text-gray-400 line-through opacity-70',
    'status-completed': 'text-green-600 font-medium',
    'status-pending': 'text-orange-500 font-medium',
    
    // 页面布局
    'container-bg': 'min-h-screen bg-gradient-to-br from-gray-50 to-gray-100',
    'page-container': 'min-h-screen bg-gray-50 pb-32',
    
    // 输入卡片
    'input-card': 'bg-white mx-6 mt-6 rounded-2xl shadow-sm border border-gray-100 overflow-hidden',
    'input-section': 'p-6 space-y-4',
    
    // 统计栏
    'stats-bar': 'fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-gray-100 shadow-lg',
    'stats-content': 'px-6 py-4 flex-between',
    'stats-item': 'text-center min-w-16',
    'stats-number': 'text-lg font-bold leading-none',
    'stats-label': 'text-xs text-muted mt-1',
    
    // 列表样式
    'list-container': 'mx-6 mt-6 space-y-3',
    'list-item': 'card-hover p-4',
    'list-item-content': 'flex-between',
    'list-item-text': 'flex-1 mr-4',
    'list-item-title': 'text-base font-medium leading-tight',
    'list-item-status': 'text-sm mt-1',
    
    // 空状态
    'empty-state': 'card py-16 text-center',
    'empty-icon': 'text-5xl mb-4',
    'empty-title': 'text-lg font-medium text-light mb-2',
    'empty-desc': 'text-sm text-gray-300',
    
    // 交互效果
    'active-scale': 'active:scale-98 transition-transform duration-150',
    'hover-lift': 'hover:shadow-md transition-shadow duration-200',
    'press-scale': 'active:scale-95 transition-transform duration-100',
    
    // 间距系统
    'space-xs': 'space-y-1',
    'space-sm': 'space-y-2',
    'space-md': 'space-y-4',
    'space-lg': 'space-y-6',
    'space-xl': 'space-y-8',
  },
  theme: {
    colors: {
      primary: 'var(--nut-primary-color)',
      gray: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827'
      }
    },
    spacing: {
      'safe-bottom': 'env(safe-area-inset-bottom)',
    }
  },
  transformers: [
    // options https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass() as any
  ]
});
